<template>
  <div>
    <babylon
      extends="minimal"
      id="babylon"
      style="position: relative; height: 100%; display: flex"
    ></babylon>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as BabylonViewer from '@babylonjs/viewer'
onMounted(() => {
  BabylonViewer.viewerManager.getViewerPromiseById('babylon').then(function (viewer) {
    // this will resolve only after the viewer with this specific ID is initialized
    console.log(1111, viewer)
    viewer.onSceneInitObservable.add(() => {
      viewer.sceneManager.camera.radius = 15
      viewer.sceneManager.camera.beta = Math.PI / 2.2
    })
    viewer.onEngineInitObservable.add((scene) => {
      viewer.loadModel({
        url: '/a.babylon'
      })
    })
  })
})
</script>

<style></style>
